<template>
    <div class="form-page">
        <el-form
            ref="form"
            :model="form"
            label-width="8em"
            class="data-form"
        >
            <div class="form-item xy-start al-str">
                <div class="title">编辑资料</div>
                <div class="yx-start al-start data">
                    <el-form-item label="所属学科" prop="categoryId">
                        <category-select
                            :category-id.sync="form.categoryId"
                            :props="{}"
                        />
                    </el-form-item>
                    <el-form-item label="资料类型" prop="categoryId">
                        <el-select v-model="form.materialType" placeholder="请选择资料类型">
                            <el-option
                                v-for="item in Object.keys(materialType)"
                                :key="item"
                                :label="materialType[item].desc"
                                :value="item"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        style=""
                        label="附件"
                        prop="attachmentInfos"
                        size="mini"
                        required="required"
                    >
                        <el-upload
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            multiple
                            :limit="fileLimit"
                            :auto-upload="false"
                            :on-change="onchange"
                            :on-remove="handleRemove"
                            :file-list="fileList">
                            <el-button size="small" type="primary">点击上传</el-button>

                        </el-upload>

                    </el-form-item>

                    <div>
                        <el-button
                            class="next-btn"
                            type="info"
                            :loading="submitFlag"
                            @click="clickCancel('materialInfoBase')"
                        >
                            取消
                        </el-button>
                        <el-button
                            class="next-btn"
                            type="primary"
                            :loading="submitFlag"
                            @click="saveArticle('form')"
                        >
                            保存
                        </el-button>
                    </div>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
import {FormPage} from "@/layout/mixin/iVue.js";
import {get} from "@/api/request";
import {ossUpload} from "@/utils/file.js";
import CategorySelect from "@/components/CategorySelect";
import message from "element-ui/packages/message";
import {mapState} from "vuex";

export default {
    name: "MaterialInfoAddSetting",
    components: {

        CategorySelect,
    },
    mixins: [FormPage],

    data() {

        return {
            fileLimit: 100,
            form: {examId: null, content: null, recommend: null, type: false},
            attachmentInfos: "",
            fileList: [],
            fileInfos: [],
        };
    },
    computed: {
        ...mapState({
            materialType: state => state.status.materialType
        })
    },
    watch: {
        "form.industryId"(industryId) {
            if (industryId) {
                this.initExam(industryId);
            } else {
                this.examOptions = [];
            }
        },

    },
    destroyed() {
        this.showTinymce = false;
    },
    created() {
        this.getIndustryOptions();
        this.showTinymce = true;
    },
    methods: {
        initExam() {
            get("/exam/exam/exam-by-industryId", {"industryId": this.form.industryId, "size": 1000}).then(res => {
                this.examOptions = res;
            });
        },
        getIndustryOptions() {
            get("/exam/industry/list", {size: 1000}).then(res => {
                this.industryOptions = res;
            });
        },
        coverAttachmentInfos() {
            let fileList = new Set(this.fileList);
            fileList.forEach(f => {
                var fileInfo = {
                    "path": f.path,
                    "size": f.size,
                    "name": f.name
                };
                this.fileInfos.push(fileInfo)
            })

            console.log(this.fileInfos)
            return this.fileInfos;
        },
        handleRemove(file, fileList) {
            this.fileList = fileList;
        },
        onchange(file, fileList) {
            let imgReaderl = new FileReader();
            imgReaderl.onload = evt => {
                this.base64Header = evt.target.result;
            };
            imgReaderl.readAsDataURL(file.raw);
            ossUpload("cdn", file.raw.name, file.raw, p => {
                file.percentage = p * 100;
                file.status = "uploading";
            }).then(result => {
                console.log("上传完成",file)
                file.path = result;
                file.status = "done";
                this.fileList.forEach(f => {
                    if (f.uid === file.uid) {
                        f.path = result;
                    }
                })
            }).catch(e => {
                this.$message.error("上传异常");
            });
            console.log("fileList", fileList)
            this.fileList = fileList
            console.log("this.fileList", this.fileList)
        },
        saveArticle(formName) {
            this.form.attachmentInfos = this.coverAttachmentInfos();
            if (this.form.type && this.form.attachmentInfos === "[]") {
                this.$message.error("附件必需上传");
                return false;
            }
            this.$refs[formName].validate(valid => {
                if (!valid) {
                    console.log("error submit!!");
                    return false;
                }
            });
            if (this.addAction) {
                this.clickSave(
                    "/material/info/batch-add-infomaterial",
                    this.form,
                    false,
                    "materialInfoBase"
                );
            } else {
                this.clickSave(
                    "/material/info/update",
                    this.form,
                    true,
                    "materialInfoBase"
                );
            }
        },
    }
};
</script>

<style lang="css" scoped>
.next-btn {
    margin-left: 12px;
}

.course-table-edit-from .el-textarea {
    width: 60em;
    max-width: 60em;
}

.form-page .form-item .data {
    grid-template-columns: repeat(1, auto);
}
</style>
